<HTML><HEAD>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>

	Dynamic clipping and scrolling example

</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>

	Isomorphic SmartClient

</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>


<!--------------------------
  Example code starts here
---------------------------->

<SCRIPT>

// HTML for the image to use in all of the canvas widgets below
var theImage = Canvas.imgHTML("yinyang.gif", 200, 200);


// overflow: visible
Canvas.create({    overflow:"visible",    left:20,    top:45,    width:100,    height:100,    contents:theImage });
Label.create({    left:20,    top:245,    width:200,    height:20,    contents:"overflow:'visible'",    align:"center" });



// overflow: clipH
Canvas.create({    overflow:"clip-h",     left:270,    top:45,    width:100,    height:100,    contents:theImage });
Label.create({    left:270,    top:245,    width:200,    height:20,    contents:"overflow:'clip-h'",    align:"center" });



// overflow: clipV
Canvas.create({    overflow:"clip-v",    left:520,    top:45,    width:100,    height:100,    contents:theImage });
Label.create({    left:520,    top:245,    width:200,    height:20,    contents:"overflow:'clip-v'",    align:"center" });



// overflow: hidden
Canvas.create({    overflow:"hidden", ID:"hiddenCanvas",    left:20,    top:345,    width:100,    height:100,    contents:theImage });
Label.create({    left:20,    top:545,    width:200,    height:20,    contents:"overflow:'hidden'",    align:"center" });

// buttons for scrolling content of the hiddenCanvas
Button.create({    left:45,    top:465,    width:50,    height:20,    title:"TL",    click:"hiddenCanvas.scrollTo(0,0)" });
Button.create({    left:145,    top:465,    width:50,    height:20,    title:"TR",    click:"hiddenCanvas.scrollTo(100,0)" });
Button.create({    left:95,    top:485,    width:50,    height:20,    title:"Center",    click:"hiddenCanvas.scrollTo(50,50)" });
Button.create({    left:45,    top:505,    width:50,    height:20,    title:"BL",    click:"hiddenCanvas.scrollTo(0,100)" });
Button.create({    left:145,    top:505,    width:50,    height:20,    title:"BR",    click:"hiddenCanvas.scrollTo(100,100)" });


// overflow: scroll
Canvas.create({    overflow:"scroll",    left:270,    top:345,    width:116,    height:116,    contents:theImage });
Label.create({    left:270,    top:545,    width:200,    height:20,    contents:"overflow:'scroll'",    align:"center" });


// note that the width of this last widget is 217, allowing for all
// of the image's width PLUS the width of the vertical scrollbar, so
// the horizontal scrollbar is unnecessary

// overflow: auto
Canvas.create({    overflow:"auto",    left:520,    top:345,    width:217,    height:100,    contents:theImage });
Label.create({    left:520,    top:545,    width:200,    height:20,    contents:"overflow:'auto'<BR>(width = 217)",    align:"center" });


</SCRIPT>
</BODY>
</HTML>
